<template>
  <page-header-wrapper>
    <a-card>
      <div class="table-page-search-wrapper">
        <div>
          <a-button type="primary" icon="plus" @click="addFunc" class="mg-b-30">创建</a-button>
        </div>
      </div>

      <!-- 列表渲染 -->
      <JeepayTable
        @btnLoadClose="btnLoading=false"
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="searchData"
        rowKey="crowdNo"
        :scrollX="1000"
      >
        <template slot="campStatus" slot-scope="{record}">
          <p v-if="record.campStatus=='CREATED'" class="blue" @click="goPay(record.payUrl)">已创建未打款</p>
          <p v-else-if="record.campStatus=='PAID'">已打款</p>
          <p v-else-if="record.campStatus=='READY'">活动已开始</p>
          <p v-else-if="record.campStatus=='PAUSE'">活动已暂停</p>
          <p v-else-if="record.campStatus=='CLOSED'">活动已结束</p>
          <p v-else-if="record.campStatus=='SETTLED'">活动已清算</p>
          <p v-else>--</p>
        </template>
        <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->
          <JeepayTableColumns>
            <a-button type="link" @click="syncInfo(record.appId,record.crowdNo)">同步信息</a-button>
          </JeepayTableColumns>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 创建  -->
    <MarketingAdd ref="mchAppAddOrEdit" :callbackFunc="searchFunc"/>
  </page-header-wrapper>
</template>
<script>
import JeepayTextUp from '@/components/JeepayTextUp/JeepayTextUp' // 文字上移组件
import JeepayTable from '@/components/JeepayTable/JeepayTable'
import JeepayTableColumns from '@/components/JeepayTable/JeepayTableColumns'
import { API_URL_MARKETING_LIST, req, synchronous } from '@/api/manage'
import MarketingAdd from './MarketingAdd'

// eslint-disable-next-line no-unused-vars
const tableColumns = [
  { key: 'couponName', title: '活动名称', dataIndex: 'couponName' },
  { key: 'prizeMsg', title: '活动描述', dataIndex: 'prizeMsg' },
  { key: 'totalAmount', dataIndex: 'totalAmount', title: '红包总金额', customRender: (text) => '￥' + (text / 100).toFixed(2) },
  { key: 'totalCount', title: '红包个数', dataIndex: 'totalCount' },
  { key: 'startTime', dataIndex: 'startTime', title: '开始时间' },
  { key: 'endTime', dataIndex: 'endTime', title: '结束时间' },
  { key: 'campStatus', title: '状态', scopedSlots: { customRender: 'campStatus' } },
  { key: 'op', title: '操作', width: '100px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
]

export default {
  name: 'IsvListPage',
  components: { JeepayTable, JeepayTableColumns, JeepayTextUp, MarketingAdd },
  data () {
    return {
      btnLoading: false,
      tableColumns: tableColumns,
      searchData: {},
      createdStart: '', // 选择开始时间
      createdEnd: '', // 选择结束时间
      visible: false,
      detailData: {},
      payWayList: []
    }
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    // 请求table接口数据
    reqTableDataFunc: (params) => {
        return req.list(API_URL_MARKETING_LIST, params)
    },
    searchFunc: function () { // 点击【查询】按钮点击事件
        this.$refs.infoTable.refTable(true)
    },
    onClose () {
        this.visible = false
    },
    addFunc: function () { // 业务通用【新增】 函数
        this.$refs.mchAppAddOrEdit.show()
    },
    syncInfo (appId, crowdNo) {
        synchronous({
            appId: appId,
            crowdNo: crowdNo
        }).then(res => {
            this.$message.success('同步成功')
            this.searchFunc() // 刷新
        }).catch(() => {
            this.searchFunc() // 刷新
        })
    },
    goPay(url){
      window.open(url);
    }
  }
}
</script>

<style lang="less" scoped>
.blue{
  color: #16b8be;
  cursor: pointer;
}
</style>
